import { Component, Fragment } from "react";
import { custom } from "../../api/common";
import { withRouter } from "react-router-dom";
import FromCom from "components/form";
import "moment/locale/zh-cn";
import { nation, face, education } from "@/global/data.js";
import moment from 'moment';

import {
  validateEmail,
  validatePeople,
  validatePhone
} from "utils/validate.js";
import Qs from "qs";
import {message} from 'antd'
class Add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 }
      },
      isEdit: false,
      id: null,
      initialValues: {},
      formItem: [
        {
          type: "Column",
          label: "个人信息",
          className: "staffTitle"
        },
        {
          type: "Input",
          label: "姓名",
          name: "name",
          required: true,
          style: { width: "250px" },
          placeholder: "请输入姓名"
        },
        {
          type: "Radio",
          label: "性别",
          name: "sex",
          required: true,
          style: { width: "250px" },
          options: [
            { label: "男", value: true },
            { label: "女", value: false }
          ]
        },
        {
          type: "Upload",
          label: "头像",
          name: "face_img",
          required: true,
          style: { width: "250px" },
          placeholder: "请上传头像",
          message: "请上传头像"
        },
        {
          type: "Upload",
          label: "毕业证",
          name: "diploma_img",
          style: { width: "250px" },
          placeholder: "请上传毕业证"
        },
        {
          type: "Input",
          label: "身份证",
          name: "card_id",
          required: true,
          style: { width: "250px" },
          placeholder: "请填写身份证",
          rules: [
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (value && validatePeople(value)) {
                  return Promise.reject("请输入正确身份证号码！");
                }
                return Promise.resolve();
              }
            })
          ]
        },
        {
          type: "Input",
          label: "手机号",
          name: "phone",
          required: true,
          style: { width: "250px" },
          placeholder: "请填写手机号",
          rules: [
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (value && validatePhone(value)) {
                  return Promise.reject("请输入正确手机号码！");
                }
                return Promise.resolve();
              }
            })
          ]
        },
        {
          type: "Select",
          label: "民族",
          name: "nation",
          required: true,
          style: { width: "250px" },
          options: nation,
          placeholder: "请选择民族"
        },
        {
          type: "Date",
          label: "出生年月",
          name: "birthday",
          required: true,
          style: { width: "250px" },
          placeholder: "请填写出生年月",
          format: "yyyy-mm",
          picker: "month"
        },
        {
          type: "Select",
          label: "政治面貌",
          name: "political",
          required: false,
          style: { width: "250px" },
          options: face,
          placeholder: "团员-党员-群众"
        },
        {
          type: "Select",
          label: "毕业院校",
          name: "school",
          required: false,
          options: education,
          style: { width: "250px" },
          placeholder: "毕业院校"
        },
        {
          type: "Input",
          label: "学历",
          name: "education",
          required: false,
          style: { width: "250px" },
          placeholder: "学历"
        },
        {
          type: "Input",
          label: "专业",
          name: "major",
          required: false,
          style: { width: "250px" },
          placeholder: "专业"
        },
        {
          type: "Input",
          label: "微信号",
          name: "wechat",
          required: false,
          style: { width: "250px" },
          placeholder: "微信号"
        },
        {
          type: "Input",
          label: "个人邮箱",
          name: "email",
          required: false,
          style: { width: "250px" },
          placeholder: "个人邮箱",
          rules: [
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value) {
                  return Promise.reject("请输入个人邮箱！");
                } else if (validateEmail(value)) {
                  return Promise.reject("请输入正确邮箱！");
                }
                return Promise.resolve();
              }
            })
          ]
        },
        {
          type: "Column",
          label: "就职信息",
          className: "staffTitle"
        },
        {
          type: "SelectComponent",
          label: "职位",
          name: "job_id",
          required: true,
          style: { width: "250px" },
          placeholder: "选择职位",
          url: "/job/listAll/",
          propsKey: { label: "jobName", value: "jobId" }
        },
        {
          type: "formItemInline",
          label: "职位状态",
          inline_formItem: [
            {
              type: "Date",
              label: "入职日期",
              name: "job_entry_date",
              required: false,
              style: { width: "100%" },
              placeholder: "请选择入职日期",
              format:'YYYY/MM/DD'
            },
            {
              type: "Date",
              label: "转正日期",
              name: "job_formal_date",
              required: false,
              style: { width: "100%" },
              placeholder: "请选择转正日期",
              format:'YYYY/MM/DD'
            },
            {
              type: "Date",
              label: "离职日期",
              name: "job_quit_date",
              required: false,
              style: { width: "100%" },
              placeholder: "请选择离职日期",
              format:'YYYY-MM-DD'
            }
          ]
        },
        {
          type: "Select",
          label: "禁启用",
          options:'status',
          style:{width:"250px"},
          name:'status',
          required:true
        },
        {
          type: "Input",
          label: "公司邮箱",
          name: "company_email",
          required: true,
          style: { width: "250px" },
          placeholder: "公司邮箱",
          rules: [
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value) {
                  return Promise.reject("请输入公司邮箱！");
                } else if (validateEmail(value)) {
                  return Promise.reject("请输入正确邮箱！");
                }
                return Promise.resolve();
              }
            })
          ]
        },
        {
          type: "Editor",
          label: "描述",
          name: "introduce",
          style: { width: "250px" }
        }
      ],
      editData: {}
    };
  }
  // 生命周期
  componentDidMount() {
    // 实验证明 只有search传参刷新不会丢失
    const search = this.props.location.search;
    if (search) {
      const id = Qs.parse(search)["?id"];
      // setState这里是异步 打印console.log是弄不出来的 需要去其它方法里面打印 其实已经修改改了
      !!id && this.setState({ isEdit: true, id });
      this.edit(id);
    }
  }
  edit = async id => {
    const res = await custom({ url: "/staff/detailed/", data: { id: +id } });
    // 处理一下日期格式 
    console.log(res.data)
    const formatData = {
      birthday:res.data.birthday ? moment(res.data.birthday) : null,
      job_entry_date:res.data.job_entry_date ? moment(res.data.job_entry_date) : null,
      job_formal_date:res.data.job_formal_date ? moment(res.data.job_formal_date) : null,
      job_quit_date:res.data.job_quit_date ? moment(res.data.job_quit_date) : null,
    }
    const editData = {...res.data,...formatData}
    this.setState({ editData });
  };
  onFinish = async (params, form) => {
    // 这里日期需要单独处理
    const formatData = {
      birthday:params.birthday ? moment(params.birthday).format('YYYY/MM') : null,
      job_entry_date:params.job_entry_date ? moment(params.job_entry_date).format('YYYY/MM/DD') : null,
      job_formal_date:params.job_formal_date ? moment(params.job_formal_date).format('YYYY/MM/DD') : null,
      job_quit_date:params.job_quit_date ? moment(params.job_quit_date).format('YYYY/MM/DD') : null,
    }
    const requestData={...params,...formatData}
    const { id } = this.state;
    try {
      //  添加 修改
      if (id) {
        requestData.staff_id=id;
        const res = await custom({ url: "/staff/edit/", data: requestData });
        message.success(res.message);
      } else {
        const res = await custom({ url: "/staff/add/", data: requestData });
        message.success(res.message);
      }
      // 重置
      form.resetFields();
    } catch (error) {
      console.log(error);
    }
  };
  render() {
    const { formLayout, formItem, editData, initialValues } = this.state;
    return (
      <Fragment>
        <FromCom
          formItem={formItem}
          formLayout={formLayout}
          submit={this.onFinish}
          editData={editData}
          initialValues={initialValues}
        ></FromCom>
      </Fragment>
    );
  }
}

export default withRouter(Add);
